<template>
    <div class="Add">
        <div v-if="hide">
            <van-form @submit="onSubmit">
                <div>
                    <div class="header_box">
                        <div>
                            <van-icon class="icon" name="arrow-left" @click="back" />
                        </div>
                        <div name="center">添加商品</div>

                        <van-button round block type="info" native-type="submit">发布</van-button>
                    </div>
                </div>
                <p class="font-sm px-1">基本信息</p>
                <van-field name="uploader" label="文件上传">
                    <template #input>
                        <van-uploader v-model="uploader" :after-read="afterRead" multiple :max-count="2" />
                    </template>
                </van-field>
                <van-field
                    v-model="chineseName"
                    name="chineseName "
                    label="中文名称 "
                    placeholder="中文名称 "
                    :rules="[{ required: true, message: '请填写中文名称 ' }]"
                />
                <van-field
                    v-model="englishName"
                    name="englishName "
                    label="英文名称 "
                    placeholder="英文名称 "
                    :rules="[{ required: true, message: '请填写英文名称 ' }]"
                />

                <van-field
                    v-model="shopId"
                    name="shopId"
                    label="商品编号"
                    placeholder="商品编号"
                    :rules="[{ required: true, message: '请填写商品编号' }]"
                />
                <van-field
                    readonly
                    clickable
                    name="termOfValidity"
                    :value="value"
                    label="日历"
                    placeholder="点击选择日期"
                    @click="showCalendar = true"
                />
                <van-calendar v-model="showCalendar" @confirm="onConfirm" />
                <van-field name="singlepointNonDelivery" label="单点不配送">
                    <template #input>
                        <van-switch v-model="singlepointNonDelivery" size="20" />
                    </template>
                </van-field>
                <p class="font-sm px-1">商品描述</p>
                <van-field name="radio" label="商品类型">
                    <template #input>
                        <van-radio-group v-model="leixin" direction="horizontal">
                            <van-radio name="1" @click="danping">单品</van-radio>
                            <van-radio name="2" @click="taocan">套餐</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                    v-model="cnGoodsDescription"
                    rows="2"
                    autosize
                    label="中文描述"
                    type="textarea"
                    maxlength="200"
                    show-word-limit
                    name="cnGoodsDescription"
                />
                <van-field
                    v-model="ukGoodsDescription"
                    name="ukGoodsDescription"
                    rows="2"
                    autosize
                    label="英文描述"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                />
                <van-field
                    v-model="ChinaIngredient"
                    name="ChinaIngredient"
                    label="中文主料"
                    placeholder="中文主料"
                    :rules="[{ required: true, message: '请填写中文主料' }]"
                />
                <van-field
                    v-model="EnglishIngredient"
                    name="EnglishIngredient"
                    label="英文主料"
                    placeholder="英文主料"
                    :rules="[{ required: true, message: '请填写英文主料' }]"
                />
                <van-field
                    v-model="ChinaTaste"
                    name="ChinaTaste"
                    label="中文口味"
                    placeholder="中文口味"
                    :rules="[{ required: true, message: '请填写中文口味' }]"
                />
                <van-field
                    v-model="EnglishTaste"
                    name="EnglishTaste"
                    label="英文口味"
                    placeholder="英文口味"
                    :rules="[{ required: true, message: '请填写英文口味' }]"
                />
                <van-field
                    v-model="productionDuration"
                    name="productionDuration"
                    label="制作时长"
                    placeholder="制作时长"
                    :rules="[{ required: true, message: '请填写制作时长 ' }]"
                />
                <p class="font-sm px-1">规格属性</p>
                <div @click="onGueige" class="font-sm px-1">商品规格</div>
                <div v-if="stater" class="font-mi p-2">商品规格暂无数据</div>
                <div v-else class="font-mi p-1">
                    <div class="p-1 border">
                        <div class="d-flex j-sb py-1">
                            <div class="">[商品规格]</div>
                            <div><van-icon name="close" class="text-danger" /></div>
                        </div>
                        <div
                            v-for="(item, index) in goodsSpecifications"
                            :key="index"
                            @click="schu(index)"
                            class="border-top"
                        >
                            <div class="d-flex j-sb">
                                <p>中文规格</p>
                                <p>{{ item.cnSpecification }}</p>
                            </div>
                            <div class="d-flex j-sb">
                                <p>英文规格</p>
                                <p>{{ item.uk_specification }}</p>
                            </div>
                            <div class="d-flex j-sb">
                                <p>价格</p>
                                <p>{{ item.goods_price }}</p>
                            </div>
                            <div class="d-flex j-sb">
                                <p>库存数量</p>
                                <p>{{ item.shop_id }}</p>
                            </div>
                            <div class="d-flex j-sb">
                                <p>加料</p>
                                <p v-if="item.picker != ''">{{ item.type }}</p>
                                <p v-else>不加料</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div @click="onTianjai" class="font-sm px-1">商品属性</div>
                <div v-if="stater" class="font-mi p-2">商品规格暂无数据</div>
                <div v-else class="font-mi p-1">
                    <div class="border p-1">
                        <div class="d-flex j-sb">
                            <div>[商品属性]</div>
                            <div><van-icon name="close" class="text-danger" /></div>
                        </div>
                        <div v-for="(item, index) in goodsAttribute" :key="index" @click="shxing(index)">
                            <div class="py-1">
                                <div class="d-flex j-sb">
                                    <p>{{ item.cnSpecification }}</p>
                                    <p>{{ item.ukSpecification }}</p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div
                                v-for="(item, index) in goodsAttribute"
                                :key="index"
                                class="font-mi text-light-muted d-flex m-2"
                                @click="xuanzhe(index)"
                            >
                                <div class="d-flex bg-light-secondary border rounded a-center span24-8">
                                    <p>{{ item.cnSpecification }}</p>
                                    <span>/</span>
                                    <p>{{ item.ukSpecification }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <van-field
                    v-model="goodsPrice"
                    name="goodsPrice "
                    label="价格 "
                    placeholder="P "
                    :rules="[{ required: true, message: '价格 ' }]"
                />
                <van-field
                    v-model="goodsInventory"
                    name="goodsInventory "
                    label="库存数量 "
                    placeholder="份 "
                    :rules="[{ required: true, message: '库存数量 ' }]"
                />
                <van-field
                    v-model="commoditySpecifications"
                    name="commoditySpecifications "
                    label="打包费 "
                    placeholder="P/份 "
                    :rules="[{ required: true, message: '打包费 ' }]"
                />
                <p class="font-sm px-1">限时限量</p>
                <van-field name="limitedSupply" label="是否限时开售">
                    <template #input>
                        <van-switch v-model="limitedSupply" size="20" />
                    </template>
                </van-field>
                <van-field name="newGoods" label="是否限量供应">
                    <template #input>
                        <van-switch v-model="newGoods" size="20" />
                    </template>
                </van-field>
                <p class="font-sm px-1">新品促销</p>
                <van-field name="specialtyGoods" label="是否新品">
                    <template #input>
                        <van-switch v-model="specialtyGoods" size="20" />
                    </template>
                </van-field>
                <van-field name="promotionGoods" label="是否招牌菜">
                    <template #input>
                        <van-switch v-model="promotionGoods" size="20" />
                    </template>
                </van-field>
                <van-field name="shopStatus" label="是否促销">
                    <template #input>
                        <van-switch v-model="shopStatus" size="20" />
                    </template>
                </van-field>
            </van-form>
        </div>
        <div v-else></div>
    </div>
</template>

<script>
import { Dialog } from 'vant'
import { mapState, mapMutations } from 'vuex'
import { outSuccess } from '@/https/Commit'
import { fileImg } from '@/https/Commit'
export default {
    data() {
        return {
            title: ['商品管理', '商品分类'],
            hide: true,
            chineseName: '',
            leixin: '1',
            englishName: '',
            radio: '1',
            shopId: '',
            switchChecked: false,
            goodsPackingFee: false,
            Checked: false,
            uploader: [],
            cnGoodsDescription: '',
            ukGoodsDescription: '',
            termOfValidity: '',
            ChinaIngredient: '',
            EnglishIngredient: '',
            ChinaTaste: '',
            EnglishTaste: '',
            goodsPrice: '',
            goodsInventory: '',
            show: false,
            stater: false,
            goodsSpecifications: [],
            goodsAttribute: [],
            dataList: [],
            limitedTimeSale: false,
            limitedSupply: false,
            newGoods: false,
            specialtyGoods: false,
            promotionGoods: false,
            shopStatus: false,
            value: '',
            showCalendar: false,
            singlepointNonDelivery: false,
            productionDuration: '',
            commoditySpecifications: '',
            dataTitle: {}
        }
    },
    created() {
        console.log(this[('CommAdd/GueGAdd', 'CommAdd/ShuXAdd')])
        this.goodsSpecifications = this.$store.state.CommAdd.GueGAdd
        console.log(this.goodsSpecifications)
        this.goodsAttribute = this.$store.state.CommAdd.ShuXAdd
        console.log(this.goodsAttribute)
    },

    methods: {
        ...mapState(['CommAdd/GueGAdd']),
        ...mapMutations(['CommAdd/AddTianjiaClass']),

        back() {
            this.$router.go(-1)
        },
        afterRead(file) {
            // 此时可以自行将文件上传至服务器

            let data = JSON.stringify(file.content)
            console.log(file.content)

            fileImg(data)
            // fileImg(file)
        },

        onSubmit(value) {
            console.log('submit', value)
            value['goodsSpecifications'] = this.goodsSpecifications[0]
            value['goodsAttribute'] = this.goodsAttribute[0]
            console.log(value)
            this.dataList = value
            if (value) {
                value.shopStatus = 1
                value.singlepointNonDelivery = 1
                value.promotionGoods = 1
                value.specialtyGoods = 1
                value.limitedSupply = 1
                value.singlepointNonDelivery = 1
                value.newGoods = 1
            } else {
                value.shopStatus = 2
                value.singlepointNonDelivery = 2
                value.promotionGoods = 2
                value.specialtyGoods = 2
                value.limitedSupply = 2
                value.singlepointNonDelivery = 2
                value.newGoods = 2
            }

            console.log(value)

            // this.dataTitle = JSON.stringify(value)
            // console.log(this.dataTitle)

            outSuccess(value)
                .then((res) => {
                    this['CommAdd/AddTianjiaClass'](value)
                    console.log(res)
                    this.$router.push('/CommodityMan')
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        onConfirm(date) {
            this.value = `${date.getMonth() + 1}/${date.getDate()}`
            this.showCalendar = false
        },
        // 商品规格
        onGueige() {
            console.log('商品规格')
            this.$router.push('/CommodityMan/SpecifiCationsView')
        },
        // 添加属性
        onTianjai() {
            console.log('onTianjai')
            this.$router.push('/CommodityMan/AttributeView')
        },
        taocan() {
            console.log('套餐')
            this.$router.push('/CommodityMan/PackagesView')
        },
        danping() {
            console.log('单品')
        },
        schu(index) {
            console.log('删除', index)
            if (index === 0) {
                Dialog.confirm({
                    message: '是否删除商品规格/属性?'
                })
                    .then((res) => {
                        console.log('成功', res)
                        this.stater = true
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }
        },
        shxing(index) {
            console.log(index)
            console.log('删除', index)
            if (index === 0) {
                Dialog.confirm({
                    message: '是否删除商品属性?'
                })
                    .then((res) => {
                        console.log('成功', res)
                        this.stater = true
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }
        },
        xuanzhe(id) {
            console.log(id)
        }
    }
}
</script>

<style lang="scss" scoped>
.Add {
    .van-button--round {
        border-radius: 0;
    }
    .van-button::before {
        position: static;
    }
    .van-button--info {
        background: none;
        width: auto;
        border: 0;
    }
}
</style>
